<template>
  <view class="add_con">
    <view class="top_con">
      <view class="title">用户档案</view>
      <view class="remark">
        <image src="/static/images/title_icon.png"></image>
        遵循医疗法规要求，需如实填写患者真实姓名
      </view>
    </view>
    <view class="userInfo_con">
      <view class="guid">
        <view class="left"> <span>*</span>患者姓名 </view>
        <view class="input">
          <u-input
            border="surround"
            type="text"
            v-model="form.name"
            :border="false"
          ></u-input>
        </view>
      </view>
      <!-- <view class="guid">
				<view class="left">
					<span>*</span>身份证号
				</view>
				<view class="input">
					<u-input border="surround" type="idcard" v-model="form.idCard" :border="false"></u-input>
				</view>
			</view> -->
      <view class="guid noGuidBorder">
        <view class="left"> <span>*</span>患者电话 </view>
        <view class="input">
          <u-input
            border="surround"
            type="number"
            v-model="form.phone"
            @blur="validatePhoneInput"
            maxlength="11"
            :border="false"
          ></u-input>
        </view>
      </view>
      <view class="guid noGuidBorder">
        <view class="left"> <span>*</span>患者年龄 </view>
        <view class="input">
          <u-input
            border="surround"
            type="number"
            v-model="form.age"
            :border="false"
          ></u-input>
        </view>
      </view>
      <view class="guid bettwen">
        <view class="left"> <span>*</span>患者性别 </view>
        <view class="input" @click="showGenderPopup()">
          {{ getGenderText(form.gender) }}<span>></span>
        </view>
      </view>
      <view class="guid bettwen">
        <view class="left"> <span>*</span>您与患者的关系 </view>
        <view class="input" @click="showRelationshipPopup()">
          {{ getRelationshipText(form.relationship) }}<span>></span>
        </view>
      </view>
    </view>

    <view class="btn_con">
      <span @click="submit()">确认添加</span>
    </view>

    <!-- 患者性别选择器 -->
    <u-popup
      v-model="showGender"
      mode="bottom"
      :closeable="true"
      @close="closeGender"
    >
      <view class="relationship-popup">
        <view class="popup-title">请选择患者性别</view>
        <view class="relationship-list">
          <view
            v-for="item in genderOptions"
            :key="item.value"
            class="relationship-item"
            @click="selectGender(item.value)"
          >
            <text>{{ item.text }}</text>
            <u-icon
              v-if="form.gender === item.value"
              name="checkmark"
              color="#7D2527"
              size="20"
            ></u-icon>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 患者关系选择器 -->
    <u-popup v-model="show" mode="bottom" :closeable="true" @close="close">
      <view class="relationship-popup">
        <view class="popup-title">请选择与患者的关系</view>
        <view class="relationship-list">
          <view
            v-for="item in relationshipOptions"
            :key="item.value"
            class="relationship-item"
            @click="selectRelationship(item.value)"
          >
            <text>{{ item.text }}</text>
            <u-icon
              v-if="form.relationship === item.value"
              name="checkmark"
              color="#7D2527"
              size="20"
            ></u-icon>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { patientAdd } from "@/api/consultation";
export default {
  data() {
    return {
      show: false,
      showGender: false,
      genderOptions: [
        { text: "男", value: "M" },
        { text: "女", value: "F" },
      ],
      relationshipOptions: [
        { text: "我是本人", value: "01" },
        { text: "患者是我朋友", value: "02" },
        { text: "患者是我亲属", value: "03" },
        { text: "患者是我父母", value: "04" },
        { text: "患者是我配偶", value: "05" },
        { text: "患者是我子女", value: "06" },
      ],
      form: {
        mobile: uni.getStorageSync("userPhone"), //小程序用户手机号
        name: "", //患者姓名
        age: "", //患者年龄
        // idCard:'',			//患者身份证
        phone: "", //患者电话
        gender: "M", //患者性别 【M：男  F：女】
        relationship: "01", //与患者关系：【01我是本人、02患者是我朋友、03患者是我亲属、04患者是我父母、05患者是我配偶、06患者是我子女】
        isDefault: 1, //是否默认就诊人 【1是 2否】
      },
    };
  },
  methods: {
    showGenderPopup() {
      this.showGender = true;
    },
    // 选择性别
    selectGender(value) {
      this.form.gender = value;
      this.showGender = false;
    },
    // 获取性别文本
    getGenderText(value) {
      const gender = this.genderOptions.find((item) => item.value === value);
      return gender ? gender.text : "请选择性别";
    },
    // 显示关系选择弹窗
    showRelationshipPopup() {
      this.show = true;
    },
    // 选择关系
    selectRelationship(value) {
      this.form.relationship = value;
      this.show = false;
    },
    // 获取关系文本
    getRelationshipText(value) {
      const relationship = this.relationshipOptions.find(
        (item) => item.value === value
      );
      return relationship ? relationship.text : "请选择关系";
    },
    // 关闭弹窗
    close() {
      this.show = false;
    },
    // 提交表单
    async submit() {
      if (!this.form.name) {
        uni.showToast({
          title: "请输入患者姓名",
          icon: "none",
        });
        return;
      }
      if (!this.form.phone) {
        uni.showToast({
          title: "请输入患者手机号",
          icon: "none",
        });
        return;
      }

      // 手机号格式验证
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!phoneRegex.test(this.form.phone)) {
        uni.showToast({
          title: "请输入正确的手机号格式",
          icon: "none",
        });
        return;
      }
      let res = await patientAdd(this.form);
      console.log(res);
      if (res.code === 200) {
        uni.showToast({
          title: "添加成功",
          icon: "none",
        });
        uni.navigateBack({
          delta: 1,
        });
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
    // 手机号输入验证
    validatePhoneInput() {
      if (this.form.phone && this.form.phone.length > 0) {
        const phoneRegex = /^1[3-9]\d{9}$/;
        if (
          !phoneRegex.test(this.form.phone) &&
          this.form.phone.length === 11
        ) {
          uni.showToast({
            title: "请输入正确的手机号格式",
            icon: "none",
            duration: 2000,
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.add_con {
  width: 100%;
  height: 100%;
  background: #f8f8f8;
  padding: 22rpx 29rpx;
  font-family: PingFang SC, PingFang SC;
  .top_con {
    margin-bottom: 30rpx;
    padding: 10rpx 0;
    .title {
      font-weight: 600;
      font-size: 32rpx;
      color: #000000;
      margin-bottom: 9rpx;
    }
    .remark {
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 26rpx;
      color: #999999;
      image {
        width: 26rpx;
        height: 31rpx;
        margin-right: 12rpx;
      }
    }
  }
  .userInfo_con {
    background: #ffffff;
    border-radius: 6rpx;
    margin-bottom: 19rpx;
    padding: 25rpx 31rpx;
    .guid {
      padding: 20rpx 0;
      border-bottom: 1rpx solid #e4e4e4;
      display: flex;
      align-items: center;
      .left {
        display: flex;
        font-weight: 400;
        font-size: 30rpx;
        color: #000000;
        width: 200rpx;
        span {
          color: #7d2527;
        }
      }
      .input {
        flex: 1;
        span {
          margin-left: 10rpx;
          color: #999999;
        }
      }
    }
    .bettwen {
      display: flex;
      justify-content: space-between;
      .left {
        width: 40%;
      }
      .input {
        text-align: right;
        color: #333333;
      }
    }
    .noGuidBorder {
      border: none;
    }
  }
  .set {
    background: #ffffff;
    border-radius: 6rpx;
    padding: 25rpx 31rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 400;
    font-size: 30rpx;
    color: #000000;
  }
  .btn_con {
    position: fixed;
    bottom: 40rpx;
    padding: 0 29rpx;
    width: 100%;
    left: 0;
    span {
      display: inline-block;
      width: 100%;
      background: #7d2527;
      border-radius: 50rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      font-size: 32rpx;
      color: #fff;
    }
  }
}

/* 关系选择弹窗样式 */
.relationship-popup {
  padding: 30rpx 0;
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;

  .popup-title {
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    color: #000000;
    margin-bottom: 30rpx;
    padding: 0 30rpx;
  }

  .relationship-list {
    .relationship-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #f5f5f5;
      font-size: 30rpx;
      color: #333333;

      &:last-child {
        border-bottom: none;
      }

      &:active {
        background-color: #f5f5f5;
      }
    }
  }
}
</style>
